<template>
  <div>
    <div class="content">
      <van-row class="userInfo">
        <van-col span="6">
          <van-image
            round
            class="avater"
            fit="fill"
            width="5em"
            height="5em"
            :src="userInfo.avatar"
          >
            <template v-slot:error>加载失败</template>
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-col>
        <van-col span="10">
          <div class="nickname">{{ userInfo.nickname }}</div>
          <div class="address">
            {{ userInfo.majorName }}<br />{{ userInfo.phone }}
          </div>
        </van-col>

        <van-col span="8" style="text-align: right">
          <!-- <van-button class="logout" type="warning" @click="logout"
            >退出登陆</van-button
          > -->
          <van-button
            class="logout"
            color="#40C0C9"
            round
            @click="toUserInfo"
            size="small"
            >编辑资料</van-button
          >
        </van-col>
      </van-row>
    </div>

    <van-divider />
    <van-row style="text-align: center">
      <van-col span="8" class="info-item">
        <span class="nums">{{ userInfo.likeNum || 0 }}</span>
        <br />我的点赞
      </van-col>
      <van-col span="8" class="info-item">
        <span class="nums">{{ userInfo.commentNum || 0 }}</span>
        <br />我的评论</van-col
      >
      <van-col span="8" class="info-item">
        <span class="nums">{{ userInfo.articleNum || 0 }}</span>
        <br />我的帖子</van-col
      >
    </van-row>
    <div class="slipt"></div>
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe> -->
    <van-grid style="margin-top: 2em">
      <van-grid-item icon="setting-o" text="设置" @click="toSetting" />
      <van-grid-item icon="warn-o" text="维护中" @click="showWait" />
      <van-grid-item icon="warn-o" text="维护中" @click="showWait" />
      <van-grid-item icon="warn-o" text="维护中" @click="showWait" />
    </van-grid>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  name: "UserPage",
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    toUserInfo() {
      this.$router.replace("/userInfo");
    },
    toSetting() {
      this.$router.replace("/setting");
    },
    showWait() {
      Toast("维护中");
    },
  },
  created() {
    let user = JSON.parse(localStorage.getItem("loginUser"));
    this.userInfo = user;
  },
};
</script>
<style scoped>
.logout {
  margin-top: 1em;
}
.content {
  width: 90%;
  margin: auto;
}
.userInfo {
  margin-top: 1em;
}
.nickname {
  margin-top: 0.5em;
  font-size: 1.5em;
  font-weight: bold;
}
.address {
  color: #9f9f9f;
}
.slipt {
  width: 100%;
  height: 1em;
  background-color: #eaeaea;
  margin-top: 0.8em;
}
.info-item {
  font-size: 0.8em;
  color: #9a9a9a;
}
.info-item {
  border-left: 1px solid #94959e;
}
.nums {
  font-size: 1.5em;
  color: black;
  font-weight: 600;
}
.info-item:first-child {
  border: none;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  margin: 2em 0 0 0;
}
</style>
